{%extends "base.html"%}
{%block body%}



<script type="text/javascript">
var globalNode = 1;
var saved = true;

function startUP() {
	var i= 0;
	var zoom = 4;
	var longitude = -96.0;
	var latitude = 37.0;
       // var longitude =  document.forms[2].elements[1].value;
       // var latitude = document.forms[2].elements[0].value;
      	// Create the map and place it.
      	
     	 //map.setMapType(G_SATELLITE_TYPE);
	var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(latitude, longitude), zoom); 
	map.setMapType(G_HYBRID_MAP);
	//map.setMapType(G_SATELLITE_TYPE);
	var mapControl = new GMapTypeControl();
	map.addControl(mapControl);
	map.addControl(new GLargeMapControl3D());
        map.addControl(new GScaleControl());
}

function selectObj(post,glat,glong) {
        numPosts = {{ routes.count }} ;
 	//sets the global node selected and then highlights it's div tag
	globalNode = post;
	//this loop resets all divs back to starting color
	for ( i = 1; i <= numPosts; i++ ) {
		var ego = i + "_nodepad";
		document.getElementById(ego).style.backgroundColor = "white";
	}

	var ego = post + "_nodepad";
	document.getElementById(ego).style.backgroundColor = "red";
	var marker = new GMarker(new GPoint(glong,glat));
	map.clearOverlays();
	map.addOverlay(marker);
	map.panTo(new GLatLng(glat,glong)); 
	gmarkers[1] = marker ;
	
}

function warning() {
	var returnval;
	if ( confirm("Warning:  This route will be deleted") )  {
		bn = document.getElementById('droute').style.visibility ="hidden";
		returnval = true;
	}
	else returnval = false;
	return returnval;
}

var helpContent = "<br><br><a href='#' class='uline' onclick='hideHelp()'>  Close Help </a>  <br><br>Select the existing route to edit or press New to begin creating a new route";



</script>
</head>
<body onload="startUP()" link="white" vlink="white" alink="red"  display: inline;>

<div id="appFrame">

{% include "title.html" %}
<div id="leftImages">
<div id="helpNode" > </div>
	<br>	<h2> Route Editor- <i> Create trail maps from geotagged images </i>  </h2>
<img src="/static/icons/help.gif"   height=17 width=17  > Press NEW to create a new route.  Press an edit or delete button to modify an existing route.
	<p class= "linkBanner">  
	 <a href="/create" class="uline" value="None" >NEW</a> </p>
        
        <u> My Routes</u> | Search Routes <br>
	{%for route in routes%} 
          <div id = "{{ forloop.counter }}_nodepad" onmouseover="selectObj( {{ forloop.counter }},{{ route.latitude }},{{ route.longitude }} ); return false;" class="imgdata" >
		<div class="banner" >
		 <form action="/deleteRoute/{{ route.key }}/" method="post" name="droute" id="droute"  onSubmit="return warning()" style="float:right">
				<input type="submit" name="dbx"  value="delete" class="nav" >
			</form>

			<form action="/editRoute/{{ route.key }}/" method="get" name = "eroute" id = "eroute">
				<input type="submit" name="ebx" value="edit"   class="nav" > 
			{{ route.routeName }}
			</form>
		</div>
		
		<ul>
		 
		 <li> <b>Latitude:</b>  &nbsp;  	{{ route.latitude }} <br>
		 <li> <b>Longitude: </b>  &nbsp; 	{{ route.longitude }} <br>
		 <li> <b>Location: </b>  &nbsp; 	{{ route.locationName }} <br>
		 <li> <b> Description: &nbsp; </b>              {{route.intro }} <br>
		</ul>
	 
		<img src="{{ route.img }}?imgmax=512" alt="{{route.routeName }}"  /> 
		<p></p>
         </div><br><hr><br>

{%endfor%}

</div>
{% include "builderMap.html" %}
</div>
</body>
{% endblock %}



